<!-- 顶部导航 -->
<div class="search-top">
    <div class="aside">
        <a class="back">退出</a>
    </div>
    <div class="top-message">
        <p>数据录入</p>
    </div>
    <div class="aside">
        <a routerLink="/login"><i nz-icon nzType="login" nzTheme="outline"></i></a>
    </div>
</div>
<!-- 数据录入表单 -->
<div class="root-search">
    <div>
      <label for="userCarPort"><i nz-icon [nzType]="'car'"></i>&nbsp;用户车位</label>
      <nz-select
          class="select-class"
          nzPlaceHolder="请选择停车区域..."
          [(ngModel)]="modelUserCarPort">
        <nz-option *ngFor="let pow of areaNumber"  [nzLabel]="pow" [nzValue]="pow"></nz-option>
      </nz-select>
    </div>
    <div>
      <label for="idealArea"><i nz-icon [nzType]="'smile'"></i>&nbsp;理想车位</label>
      <nz-select
          class="select-class"
          [(ngModel)]="modelIdealArea"
          (ngModelChange)="messageChange()"
          nzPlaceHolder="请选择停车区域...">
        <nz-option *ngFor="let pow of areaNumber"  [nzLabel]="pow"  [nzValue]="pow"  nzCustomContent>
          <span *ngIf="pow != modelUserCarPort">{{ pow }}</span>
          <span *ngIf="pow == modelUserCarPort">{{ pow }}----当前车位</span>
        </nz-option>
      </nz-select>
    </div>
    <div>
      <label for="suitableArea"><i nz-icon [nzType]="'meh'"></i>&nbsp;次选车位</label>
      <nz-select
        class="select-class"
        [nzMaxTagPlaceholder]="tagPlaceHolder"
        [(ngModel)]="modelSuitableArea"
        nzMode="multiple"
        nzPlaceHolder="请选择停车区域...">
        <nz-option *ngFor="let pow of areaNumber" [nzValue]="pow"  [nzLabel]="pow"  nzCustomContent>
          <span [ngClass]="{ optionChang: true }" *ngIf="showTipNumber.indexOf(pow) != -1" >{{ pow }} - - - - 推荐车位</span>
          <span [ngClass]="{ optionChang: false }" *ngIf="showTipNumber.indexOf(pow) == -1" >{{ pow }}</span>
        </nz-option>
      </nz-select>
      <ng-template #tagPlaceHolder let-selectedList >当前已选择{{ selectedList.length }}项</ng-template>
    </div>
</div>
<!-- 提交按钮 -->
<div class="button-group">
  <button class="button-left" nz-button nzType="primary" nzSize="default" (click)="showModal()">重置</button>
    <nz-modal
      [(nzVisible)]="isVisible"
      (nzOnCancel)="handleCancel()"
      (nzOnOk)="handleOk()">
      确定重置已经输入的数据吗？
    </nz-modal>
  <button class="button-right" nz-button nzType="primary" nzSize="default" (click)="submitForm()">查询</button>
</div>
